<template>
    <el-row class="row-bg" justify="start">
        <a href="#/main/cms/nav/create">
            <el-button type="primary">
                创建
            </el-button>
        </a>
    </el-row>

    <div style="height:15px"></div>
    <el-table :data="navList" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
        <el-table-column property="title" label="导航名称" width="">
        </el-table-column>
        <el-table-column label="父导航" width="">
            <template #default="scope">
                <span v-if="!scope.row.parent">无</span>
                <span v-if="scope.row.parent">{{ scope.row.parent.title }}</span>
            </template>
        </el-table-column>
        <el-table-column property="link" label="链接" width="">
        </el-table-column>
        <el-table-column property="bottom" label="底部显示" width="">
            <template #default="scope">
                <span v-show="scope.row.bottom == 1" style="color:green">是</span>
                <span v-show="(scope.row.bottom == 0)" style="color:red">否</span>
            </template>
        </el-table-column>
        <el-table-column property="sort_order" label="排序" width="">
        </el-table-column>
        <el-table-column property="status" label="状态" width="">

            <template #default="scope">
                <span v-show="scope.row.status == 1" style="color:green">启用</span>
                <span v-show="(scope.row.status == 0)" style="color:red">禁用</span>
            </template>
        </el-table-column>

        <el-table-column property="" label="编辑" width="">

            <template #default="scope">
                <!-- <el-button link type="primary" size="small"
                @click.prevent="deleteNav(scope.row.id)" >
                    删除
                </el-button> -->
                <a class="el-button el-button--primary el-button--small" @click.prevent="deleteNav(scope.row.id)">删除</a>
                <a class="el-button el-button--primary el-button--small"
                    :href="'#/main/cms/nav/edit/' + scope.row.id">编辑</a>
                <a class="el-button el-button--primary el-button--small"
                    :href="'#/main/cms/nav/create/' + scope.row.id">创建子导航</a>
            </template>
        </el-table-column>

    </el-table>

    <div class=" table-below ">

        <el-pagination @current-change="changePage" :page-size="per_page" layout="prev, pager, next" :total="total" />
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const search: any = ref<object>({
    name: ''
})
const navList: any = ref<object>()
const per_page: any = ref<number>(10);
const total: any = ref<number>();
const changePage: any = ref<number>(1);


const handleCurrentChange = () => {

}

const do_search = () => {

    getList();
}

const getList = () => {

    const url = window.VITE_URL + '/admin.cms.nav/index';

    // console.log(url,data)
    axios.get(url).then(res => {

        navList.value = res.data;

    });
}
getList();

// 编辑分类
const deleteNav = (id: any) => {

    const url = window.VITE_URL + '/admin.cms.nav/remove';
    let data = {
        id: id
    };
    // console.log(url,data)
    axios.post(url, data).then( (res:any) => {

        // console.log( res );
        if( res.data.code ){
            ElMessage({
                message: res.data.message,
                type: 'error',
                duration: 1000
            })
        }

        getList();

    });

}

// 进入子导航页面
const showChildNav = () => {



}
</script>